import React, { useState, useEffect } from 'react'
import { NavLink } from 'react-router-dom';

export default function FnTitle() {
    let [count, setCont] = useState(0)
    let [food, setFood] = useState('apple')
    let [age, setAge] = useState(18)
    // 解决了函数组件中没有生命周期的问题 会在初始化、更新、销毁时执行
    // 第二个参数可以空缺，可以是空数组，也可以是由内容的数组  数组项就是监听的数据 当这些数据更新时，useEffect执行
    // 第一个参数的return也是可选
    // 情况1 第一个参数没有return，第二个参数空缺 = componentDidMount + componentDidUpdate
    // 情况2 第一个参数没有return，第二个参数是空数组 = componentDidMount
    // 情况3 第一个参数没有return，第二个参数中有变量  = componentDidMount + （依赖更新造成的）componentDidUpdate
    // 情况4 
    useEffect(()=>{
        console.log('useEffect执行了');
        document.title = `你已经点击了${count}次按钮`
        return ()=>{
            // return的函数会在组件销毁时执行
            console.log('我噶了');
        }
    })
    return (
        <div>
            <p>按钮上显示点击的次数，页面的title也显示</p>
            <button onClick={() => setCont(count + 1)}>{count}</button>
            <button onClick={() => setFood('banana')}>{food}</button>
            <button onClick={() => setAge(age + 1)}>{age}</button>
            <NavLink to="/classtitle">classTitle</NavLink>
        </div>
    )
}
